<template>
    <el-container>
        <el-button v-if="config.add" type="primary" @click="handleAdd" style="height: 28px;"><i
                class="el-icon-circle-plus-outline el-icon--left"></i>新增</el-button>
        <el-button v-if="config.refresh" type="primary" @click="handleRefresh" style="height: 28px;"><i class="el-icon-refresh-right
 el-icon--left"></i>刷新</el-button>
        <el-button v-for="item in config.statusBtns" v-bind:key="item.name" :ref="item.name" type="primary"
            @click="_handleStatusFilter(item)" style="height: 28px;"><i class="el-icon-position
 el-icon--left"></i>{{ item.name }}</el-button>
        <el-pagination class="page-container" v-if="config.showPage" background layout="prev, pager, next"
            style="padding-top: 0px;" :page-size="config.pageSize" @current-change="handleCurrentChange"
            :total="config.total">
        </el-pagination>
    </el-container>
</template>

<style lang="scss">
.page-container {
    margin-left: auto !important;
}

.clicked {
    border-color: #67C23A !important;
    background-color: #67C23A !important;
}
</style>

<script>
export default {
    name: 'HeaderBtnGroup',
    props: {
        config: {
            type: Object,
            default: () => {
                return {
                    total: 1,
                    pageSize: 10,
                    showPage: true,
                    add: true,
                    refresh: true,
                    statusBtns: [
                        { status: -1, name: "全部" },
                        { status: 0, name: "待采集" },
                        { status: 1, name: "已采集" },
                        { status: 2, name: "已生成" },
                        { status: 3, name: "已发布" }
                    ]
                }
            }
        }
    },
    data() {
        return {}
    },
    methods: {
        handleAdd() {
            this.$emit("handleClick", { name: "handleAdd" })
        },
        handleRefresh() {
            this.$emit("handleClick", { name: "handleRefresh" })
        },
        handleCurrentChange(page) {
            this.$emit("handleClick", { name: "handleCurrentPage", value: page })
        },
        _handleStatusFilter(row) {
            console.log(this.$refs[row.name])
            this.beforeStatusFilter(this.$refs, row)
            this.handleStatusFilter(row)
        },
        beforeStatusFilter(refs, row) {
            this.$emit("handleClick", {
                name: "beforeStatusFilter", value: {
                    data: row, refs: refs, className: "clicked"
                }
            })
        },
        handleStatusFilter(row) {
            this.$emit("handleClick", { name: "handleStatusFilter", value: row })
        }
    }
}

</script>